<template>
	<view class="page_box">
		<u-navbar :is-back="true" title="我的预约" v-if="1" :border-bottom="false"></u-navbar>

		<view class="content_box ">
		
			<view class="content-item">
				<view v-for="(item, index) in decoration_list" :key="index" class="list-item">
					<view class="flex align-center margin-bottom-sm">
						<u-avatar size="80" mode="circle" src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/custserv_avatar.png"></u-avatar>
						<view class="flex flex-direction margin-left-sm">
							<text>玛卡巴卡</text>
							<text class="f24 margin-top-xs" style="color: #717171;">设计费：100m²起|103个作品</text>
						</view>
					</view>
					<view @click="detailBind">
						<view class="case-img">
							<image :src="item.img" mode="aspectFill" class="img"></image>
						</view>
						<view class="margin-top-sm">
							<view class="f32 hidden">{{item.title}}</view>
						</view>
						<view class="flex align-center margin-top-sm">
							<view class="tipc-btn">{{item.lbl}}</view>
							<view class="f24">{{item.tips}}</view>
						</view>
					</view>
				</view>
			</view>


		</view>

		<yy-login v-if="vuex_login"></yy-login>
		<yy-loading text="加载中.." mask="true" click="true" ref="loading"></yy-loading>
		<u-toast ref="uToast" />
	
	</view>
</template>

<script>
export default {
	data() {
		return {
			decoration_list: [{
				img: 'https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/case.png',
				title: '现代简约低奢风小户型',
				lbl:"日式",
				tips: '3室·260m²|成都|6万',
				avatar: 'https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/ico_alk.png',
			},{
				img: 'https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/case.png',
				title: '现代简约低奢风小户型',
				lbl:"日式",
				tips: '3室·260m²|成都|6万',
				avatar: 'https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/ico_alk.png',
			}
		]};
	},
	onShow() {
		
	},
	onLoad(e) {},
	methods: {
		detailBind(){
			uni.navigateTo({
				url:'../decoration_hall/case_details'
			})
		}
	}
};
</script>

<style lang="scss" scoped>
.page_box {

}

.content_box {
	.content-item{
		padding-top: 0;
		padding-bottom: 40rpx;
	}
	.list-item{
		padding: 45rpx 0;
		border-bottom: 1rpx solid #F2F2F2;
		&:last-child{
			border-bottom: none;
		}
		.case-img{
			border-radius: 10rpx;
			width: 100%;
			height: 330rpx;
			overflow: hidden;
			.img{
				width: 100%;
				height: 100%;
			}
		}
		.tipc-btn{
			background: #ffb81e;
			border-radius: 6px;
			padding: 5rpx 18rpx;
			color: white;
			font-size: 22rpx;
			margin-right: 10rpx;
		}
	}
}
</style>
